@import "@/style/var.less";

.answer-notes {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .answer-wrap {
    overflow-y: auto;
    background-color: #ecf5f4;
    height: calc(100vh - 70px);
    background-image: url("~assets/reverse/answer-topbg.png");
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 200px;
  }
  .chose-course-top {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    height: 80px;
    padding: 0 40px;
    background-color: #fff;
    .anticon {
      font-size: 24px; /* no */
    }

    .header-left {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .back-arrow {
        width: 30px;
        height: 27px;
        background-image: url("~assets/home/btn_back.png");
        background-size: 100%;
        cursor: pointer;
      }
    }

    .course-title {
      width: 100%;
      font-size: 20px;
      flex: 1;
      font-weight: 700;
    }
    // .blank {
    //   flex: 1;
    //   display: flex;
    // }
  }

  .chapter-title {
    .no-rem-fontsize(24px);
    font-weight: 700;
    color: #fff;
    margin: 30px 0;
  }

  .answer-result {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    height: 100px;
    background-color: #fff;
    margin: 30px auto;
    border-radius: 10px; /* no */
    box-shadow: 0px 0px 20px rgba(59, 201, 164, 0.3);

    .result-item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin: 0 36px;
      .no-rem-fontsize(14px);

      & > span:nth-child(2) {
        font-family: Klavika;
        color: @primary-color;
        .no-rem-fontsize(24px);
      }
    }
  }

  .yxp-info {
    display: flex;
    justify-content: center;
    .yxp-credit,
    .yxp-diamond {
      display: flex;
      align-items: center;
      margin: 0 16px;
      img {
        width: 30px; /* no */
      }
      span {
        .no-rem-fontsize(20px);
        color: #fbad51;
        margin: 0 5px;
      }
    }
  }
  .answer-content {
    margin: 54px 0 24px 0;
    .answer-title {
      img {
        width: 42px; /* no */
        vertical-align: top;
      }
      span {
        .no-rem-fontsize(30px);
        color: #333;
        font-weight: 700;
        margin-left: 9px;
      }
    }

    .subjects-item {
      width: 800px;
      margin: 20px auto;
      padding: 36px 40px 27px 40px;
      background-color: #fff;
      border-radius: 10px; /* no */
      text-align: left;
      &.subjects-item__error {
        border: 1px solid #ff604b;
      }
      & > p:nth-of-type(1) {
        font-size: 0;
        span {
          .no-rem-fontsize(24px);
          padding: 3px; /* no */
        }
      }
      & > p:nth-of-type(2),
      & > p:nth-of-type(3) {
        color: @primary-color;
        .no-rem-fontsize(20px);
        padding-left: 26px;
      }
      & > p:nth-of-type(2) {
        font-weight: 700;
        margin: 24px 0 17px 0;
      }
      .space-blank {
        display: inline-block;
        vertical-align: text-bottom;
        min-width: 30px; /* no */
        border-bottom: 1px solid #333;
        text-align: center;
        font-weight: 700;
      }
    }
  }
}
